<template>
	<view>
		<view class="fontSizeBox">
			<text class="fontSize" :style="style">字体大小示例</text>
		</view>
		<view class="iceFlex">
			<view v-for="(item, index) in radios" :key="index">
				<u-tag :text="`${item.value}px`" :plain="!item.checked" type="success" :name="index"
					@click="radioClick(item.value)">
				</u-tag>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		watch
	} from 'vue';
	const emits = defineEmits(['fromChild'])
	const props = defineProps({
		fontSize: {
			type: Number
		}
	})
	const style = reactive({
		fontSize: '16px'
	})
	const radios = reactive(
		[{
				value: 12,
				checked: false
			},
			{
				value: 14,
				checked: false
			},
			{
				value: 16,
				checked: false
			},
			{
				value: 18,
				checked: false
			},
			{
				value: 20,
				checked: false
			},
			{
				value: 22,
				checked: false
			},
			{
				value: 24,
				checked: false
			},
		]
	);

	const radioClick = (name) => {
		radios.forEach((item, index) => {
			const fontsize = radios[index].value
			item.checked = fontsize === name;
			if (item.checked) {
				style.fontSize = `${fontsize}px`
				emits('fromChild', fontsize)
			}
		});
	};

	const checkboxClick = (name) => {
		checkboxs[name].checked = !checkboxs[name].checked;
	};
	watch(
		() => props.fontSize,
		(n) => {
			radioClick(n)
		}, {
			immediate: true,
			deep: true
		}
	)
</script>

<style lang="scss" scoped>
	.fontSizeBox {
		text-align: center;
		margin-bottom: 30px;
	}
</style>